<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<%@include file="header.jsp" %>
		<link rel="stylesheet" href="resources/css/validationEngine.jquery.css" type="text/css"/>
		<link href="resources/css/cloud-zoom.css" rel="stylesheet" type="text/css" />
		<script type="text/JavaScript" src="resources/js/cloud-zoom.1.0.2.min.js"></script>
		<script type="text/javascript">
			
			var i = 1;
 			
			$(document).ready(function() {
				$("#CompareBox").hide();
				$("#tick").hide();
			});
					
			$(function() {	
			    var $sidebar   = $("#scrollbox"),
			        $window    = $(window),
			        topPadding = 30,
			        offset     = $sidebar.offset();
			        
			    $window.scroll(function() {
			        if ($window.scrollTop() > offset.top) {
			            $sidebar.stop().animate({
			                marginTop: $window.scrollTop() - offset.top + topPadding
			            });
			        } else {
			            $sidebar.stop().animate({
			                marginTop: 0
			            });
			        }
			    });	
			});
			
			$(function() {	
			    var $sidebar   = $("#CompareBox"),
			        $window    = $(window),
			        topPadding = -100,
			        offset     = $sidebar.offset();
			        
			    $window.scroll(function() {
			        if ($window.scrollTop() > offset.top) {
			            $sidebar.stop().animate({
			                marginTop: $window.scrollTop() - offset.top + topPadding
			            });
			        } else {
			            $sidebar.stop().animate({
			                marginTop: 0
			            });
			        }
			    });	
			});
			
			$(function(){
				$("button[name='btnVergelijk']").click(function () {
					
					$("#tick").hide();
					
					var box = $("#CompareBox");
					
					if(box.is(':hidden')) {
						box.fadeIn();
					}
										
					if(i == 1 || i == 2) {
						$("#compare" + i).text($(this).attr("title"));
						$("#compare" + i).append("  <input class='btnImage' type='image' src='resources/images/delete.gif' onclick='deleteProduct(" + i +")' />");
						$("#hidden" + i).val($(this).val());
					}
					
					i++;
					
					return false;
				});
				
				$("button[name='btnCompare']").click(function () {
					var h1 = $("#hidden1").val();
					var h2 =  $("#hidden2").val();
					
					if(h1 == "" || h2 == "") {
						return false;
					} else {
						return true;
					}
				});
				
				$("button[name='btnClose']").click(function () {
					
					$("#CompareBox").fadeOut();
				
					$("#compare1").text("");
					$("#compare2").text("");
					$("#hidden1").val(null);
					$("#hidden2").val(null);
					
					i = 1;
										
					return false;
				});
				
			});
			
			function deleteProduct(ID) {
				$("#compare" + ID).text("");
				$("#hidden" + ID).val(null);
				$("#tick").hide();
								
				i = ID;
			}
									
	        function doAjaxPost() {
	            var name = $('#name').val();
	            var priceLow = $('#priceLow').val();
	            var priceHigh = $('#priceHigh').val();
	            var CPU = $('input[name="CPU"]:checked').serialize();
	            var HDD = $('input[name="HDD"]:checked').serialize();
	            var RAM = $('input[name="RAM"]:checked').serialize();
	            
	            $.ajax({
	            type: "POST",
	            url: "notebooksFilter",
	            data: "name=" + name + "&priceLow=" + priceLow + "&priceHigh=" + priceHigh + "&CPU=" + CPU + "&HDD=" + HDD + "&RAM=" + RAM,
	            success: function(response){
	            $('#result').html(response);
	            },
	            error: function(e){
	            alert('Error: ' + e);
	            }
	            });
	            }
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="splash">
				<img src="resources/images/pic1.jpg" alt="" />
			</div>
			<div id="menu">
				<ul>				
					<li><a href="index">Homepage</a></li>
					<li><a href="notebooks">Notebooks</a></li>
					<li>Account <span class="arrow"></span>
						<ul>
							<c:choose>
								<c:when test="${ firstname != null }">
									<li class="first"><a href="logout">Logout</a></li>
								</c:when>
								<c:when test="${ firstname == null}">
									<li class="first"><a href="login">Inloggen</a></li>
									<li><a href="registratie">Registreren</a></li>
								</c:when>
							</c:choose>	
						</ul>
					</li>
					<li><a href="about">About</a></li>
					<c:choose>
						<c:when test="${ admin == 0 || admin == null }">
							<li class ="cartI"> <img src="resources/images/shopping_cart.png" alt="" /></li>
							<li class ="cart"><a href="winkelwagen">Winkelwagen</a></li>
						</c:when>
						<c:when test="${ admin == 1 }">
							<li class ="cartI"> <img src="resources/images/adminmodule.png" alt="" /></li>
							<li class ="cart"><a href="admin">Admin module</a></li>
						</c:when>
					</c:choose>		
				</ul>				
				<br class="clearfix" />
			</div>
			<div id="page">
				<div id="content">
					<div class="box">
						<h1>notebooks</h1>
					</div>
					<div id="result">
						<c:forEach items="${products}" var="product">
							<table class="productTable">
								<tr>
									<td class="td40">
										<c:forEach items="${photoAvailable}" var="item">
											<c:if test="${item.key == product.EAN_UCC_13}">
												<c:choose>
													<c:when test="${item.value == true}">
														<a href='resources/images/producten/${product.EAN_UCC_13}/big.jpg' class = 'cloud-zoom' id='zoom1' rel='adjustX: 10, adjustY:-4'>
														<img src='resources/images/producten/${product.EAN_UCC_13}/small.jpg' alt=''/>
														</a>
													</c:when>
													<c:when test="${item.value == false}">
														<img src='resources/images/producten/no_photo/no_photo.jpg' alt=''/>
													</c:when>
												</c:choose>
											</c:if>
										</c:forEach>
									</td>
									<td class="td60">
										<div class="productOmschrijving">
											<span class="notebookTitel">
												${product.name}
											</span>
											<br/>
											<br/>
											${product.description}
										</div>
									</td>
								</tr>
								<tr>
									<td class="td40">
										<div class="center">
										<span class="rating">
											<c:set var="counter" value="0"/>
											<c:set var="totaal" value="0"/>
											<c:forEach items="${ratings}" var="rating">
												<c:if test="${rating.EAN_UCC_13 == product.EAN_UCC_13}">
													<c:set var="counter" value="${counter + 1}" />
													<c:set var="totaal" value="${totaal + rating.value}" />
												</c:if>
											</c:forEach>
											<c:choose>
												<c:when test="${counter != 0}">
													<c:set var="gemiddelde" value="${totaal / counter}" />
												</c:when>
												<c:when test="${counter == 0}">
													<c:set var="gemiddelde" value="0" />
												</c:when>
											</c:choose>
											<c:forEach var="i" begin="1" end="5">
												<c:choose>
													<c:when test="${gemiddelde >= 1}">
														<img src="resources/images/producten/rating/star.png" alt="" />
														<c:set var="gemiddelde" value="${gemiddelde - 1}" />
													</c:when>
													<c:when test="${gemiddelde > 0}">
														<img src="resources/images/producten/rating/halfstar.png" alt="" />
														<c:set var="gemiddelde" value="0" />
													</c:when>
													<c:otherwise>
														<img src="resources/images/producten/rating/blankstar.png" alt="" />
													</c:otherwise>
												</c:choose>
											</c:forEach>
										</span>
											<br/>
											<table class="vindLeuk">
												<tr>
													<td>
														<iframe src="http://www.facebook.com/plugins/like.php?href=http://localhost:8080/SoftwareProjectJava/specs?ID=${product.EAN_UCC_13}&amp;locale=nl_NL&amp;send=false&amp;layout=box_count&amp;width=95&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:95px; height:65px;" allowTransparency="true"></iframe>
													</td>
													<td>
													<div class="kerenGekocht">
													<c:set var="counter" value="0" />
													<c:forEach items="${sales}" var="sale">
													<c:if test="${sale.EAN_UCC_13 == product.EAN_UCC_13}">
													<c:set var="counter" value="${counter + 1}" />
													</c:if>
													</c:forEach>
													<c:choose>
														<c:when test="${counter == 0}">Nog niemand heeft<br/>deze notebook in bezit.
														</c:when>
														<c:when test="${counter == 1}">${counter} persoon heeft<br/>deze notebook gekocht.
														</c:when>
														<c:otherwise>${counter} personen hebben<br/>deze notebook gekocht.
														</c:otherwise>
													</c:choose>
													</div>
													</td>
												</tr>
											</table>
										</div>
									</td>
									<td class="td60">
										<form action="productCheckup" method="post">
											<div class="center">
												<div class="schikkingKnoppen">
												<button class="submit" type="submit" name="btnSpecs" value="${product.EAN_UCC_13}">Uitgebreide specificaties</button>
												<button class="submit" type="submit" name="btnStores" value="${product.EAN_UCC_13}">Verkooppunten</button>
												<button class="submit" type="submit" name="btnVergelijk" title="${product.name}" value="${product.EAN_UCC_13}">Voeg toe aan vergelijking</button>
												</div>
											</div>
										</form>
									</td>
								</tr>
							</table>
							<c:forEach items="${offers}" var="offer">
								<c:if test="${product.EAN_UCC_13 == offer.EAN_UCC_13}">
								<div class="groepTableFix">
									<table class="productTable">
										<tr>
											<td class="tdGroepsTitel" colspan="3">
												<span class="tdGroepsTitel">
													Deze notebook is als groepsaankoop beschikbaar!
												</span>
											</td>
										</tr>
										<tr>
											<td class="tdPrijs">
												<span class="highlight">${product.price}</span> euro
											</td>
											<td class="tdKorting">
												<span class="highlight">${offer.discount}%</span> groepskorting
											</td>
											<td class="tdButton" rowspan="4">
												<form action="productCheckup" method="post">
													<div  class="center">
														<div class="winkelwagenFoto">
															<img src="resources/images/shopcartapply.png" alt="" />
														</div>
														<button class="submit" type="submit" name="btnWinkelwagen" value="${product.EAN_UCC_13}">Toevoegen aan winkelwagen</button>
														
													</div>
												</form>
											</td>
										</tr>
										<tr>
											<td class="tdExtraInfo" colspan="2">
												Er moeten minstens <span class="highlight">${offer.minParticipators}</span> inschrijvingen zijn.
											</td>
										</tr>
										<tr>
											<td class="tdExtraInfo" colspan="2">
												<c:set var="counter" value="0"/>
												<c:forEach items="${personsInOffer}" var="PersonInOffer">
													<c:if test="${PersonInOffer.offer_id == offer.offer_id}">
														<c:set var="counter" value="${counter + PersonInOffer.amount }" />
													</c:if>
												</c:forEach>
												<c:choose>
													<c:when test="${counter == 0}">
														Tot nu toe zijn er nog geen inschrijvingen.
													</c:when>
													<c:when test="${counter == 1}">
														Tot nu toe is er al <span class="highlight"><c:out value="${counter}"></c:out> </span> inschrijving.
													</c:when>
													<c:otherwise>
														Tot nu toe zijn er al <span class="highlight"><c:out value="${counter}"></c:out> </span> inschrijvingen.
													</c:otherwise>
												</c:choose>
											</td>
										</tr>
										<tr>
											<td class="tdExtraInfo" colspan="2">
												Aanbod geldig tot en met <span class="highlight">${offer.availabilityEnd}</span>.
											</td>
										</tr>
									</table>
								</div>
								</c:if>
							</c:forEach>
							<br/>
							<br/>
						</c:forEach>
					</div>							
					<br class="clearfix" />
				</div>
				<div id="sidebar">
					<div id="CompareBox" class="filterBorder">
						<h3>Vergelijken</h3>
						<div>
							<p>Selecteer 2 laptops..
							   <img id="tick" src="resources/images/tick.png" alt="tick" />
							</p>
							<ul>
								<li id="compare1"></li>								
								<li id="compare2"></li>						
							</ul>
							<form action="productCheckup" method="post">
							<div>
								<input id="hidden1" name="hidden1" type="hidden" value=""></input>
								<input id="hidden2" name="hidden2" type="hidden" value=""></input>
								<button class="filterKnop" name="btnCompare">Vergelijk !</button>
								<br/>
								<button class="filterKnop" name="btnClose">Sluiten</button>			
							</div>					
							</form>
						</div>
					</div>
					<div id="scrollbox" class="box" >
						<form id="filterForm" onsubmit="return false">
							<h3>Filteren</h3>
							<div class="filterBorder">
								<div class="filterTitel">
									Naam
								</div>
								<div class="filterData">
									<input class="submitText" type="text" id="name"/>
								</div>
								<div class="filterTitel">
									Prijs
								</div>
								<div class="filterData">
									<div class="submitFilterPrijs" style="float:left;">van &euro; <input class="validate[custom[number], min[0], max[10000]]" type="text" id="priceLow" name="priceLow"/></div>
									<div class="submitFilterPrijs" style="float:right; margin:0 20px 0 0;">t.e.m. &euro; <input class="validate[custom[number], min[0], max[10000]]" type="text" id="priceHigh" name="priceHigh"/></div>
								</div>
								<div class="filterTitel">
									Capaciteit
								</div>
								<div class="filterData">
									<c:forEach items="${internalHD}" var="InternalHD">
										<input type="checkbox" name="HDD" value="${InternalHD.intHD_id}"/> ${InternalHD.capacityOfStorage} GB<br/>
									</c:forEach>
								</div>
								<div class="filterTitel">
									Ram module
								</div>
								<div class="filterData">
									<c:forEach items="${ram}" var="Ram">
										<input type="checkbox" name="RAM" value="${Ram.ram_id}"/> ${Ram.memoryCapacity} MB<br/>
									</c:forEach>
								</div>
								<div class="filterTitel">
									Processor
								</div>
								<div class="filterData">
									<c:forEach items="${cpu}" var="Cpu">
										<input type="checkbox" name="CPU" value="${Cpu.cpu_id}"/> ${Cpu.name}<br/>
									</c:forEach>
								</div>
								<div class="filterTitel">
									<button class="filterKnop" name="btnFilter" onclick="doAjaxPost()" value="btnFilter">Filter!</button>
								</div>
							</div>
					</form>
					</div>
					<br class="clearfix" />
				</div>
			</div>
		</div>
		<div id="footer">
		</div>
		<script src="resources/js/jquery.validationEngine-nl.js" type="text/javascript" charset="utf-8"></script>
		<script src="resources/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(document).ready(function(){
		   		$("#filterForm").validationEngine();
			});
		</script>
	</body>
</html>